<template>
  <div class="table-wrapper">
    <div class="table-wrapper-inner" ref="tableWrapperInner" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove">
      <table class="production-schedule-table">
        <thead>
        <tr>
          <th rowspan="4" class="work-order-header">工单号</th>
          <th colspan="61" class="main-header">计划排产信息</th>
        </tr>
        <tr>
          <th v-for="weekday in weekdays" :key="weekday" class="weekday-header">{{ weekday }}</th>
        </tr>
        <tr>
          <th v-for="dateObj in dateList" :key="dateObj.date" class="date-header">{{ dateObj.date }}</th>
        </tr>
        <tr>
          <th v-for="dateObj in dateList" :key="dateObj.date" class="plan-quantity-header">计划数量</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(dayData, index) in tableData" :key="index">
          <td v-for="detail in dayData" :key="detail.key" class="table-cell">{{ detail.value }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      weekdays: [], // 存储日期对应的星期数据
      dateList: [], // 存储从当前日期开始前后各30天内的日期数据
      tableData: [], // 这里可以根据实际业务需求填充具体的数据，示例中暂时为空数组
      currentDate: moment(), // 当前日期
      isDragging: false, // 标记是否正在拖动
      startX: 0, // 记录鼠标按下时的横坐标
      scrollLeft: 0, // 记录滚动容器的初始滚动位置
      currentDateIndex: 0 // 当前日期在dateList中的索引
    };
  },
  mounted() {
    this.initTableHeaders();
    this.$nextTick(() => {
      const el = document.createElement('div');
      if ('webkitOverflowScrolling' in el.style) {
        const tableWrapperInner = document.querySelector('.table-wrapper-inner');
        if (tableWrapperInner) {
          tableWrapperInner.style.webkitOverflowScrolling = 'touch';
        }
      }
      // 滚动到当前日期位置
      this.scrollToCurrentDate();
    });
    // 监听 id 为 app 的元素上的 mouseup 事件
    const appElement = document.getElementById('app');
    appElement.addEventListener('mouseup', this.handleMouseUp);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听，防止内存泄漏
    const appElement = document.getElementById('app');
    appElement.removeEventListener('mouseup', this.handleMouseUp);
  },
  methods: {
    initTableHeaders() {
      const startDate = this.currentDate.clone().subtract(30, 'days');
      for (var i = 0; i < 61; i++) {
        const date = startDate.clone().add(i, 'days');
        const weekday = this.getWeekdayName(date);
        this.weekdays.push(weekday);
        this.dateList.push({
          date: date.format('YYYY-MM-DD')
        });
        if (date.isSame(this.currentDate, 'day')) {
          this.currentDateIndex = i;
        }
      }
    },
    getWeekdayName(date) {
      const weekdayIndex = date.isoWeekday() - 1;
      const chineseWeekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      return chineseWeekdays[weekdayIndex];
    },
    handleMouseDown(event) {
      this.isDragging = true;
      this.startX = event.pageX;
      this.$nextTick(() => {
        this.scrollLeft = this.$refs.tableWrapperInner.scrollLeft;
      });
    },
    handleMouseUp() {
      this.isDragging = false;
    },
    handleMouseMove(event) {
      if (this.isDragging) {
        const tableWrapperInner = this.$refs.tableWrapperInner;
        const rect = tableWrapperInner.getBoundingClientRect();
        const isInside = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
        if (!isInside) {
          this.isDragging = false;
        } else {
          const x = event.pageX;
          const walk = (x - this.startX) * 1; // 可根据实际拖动灵敏度调整系数，这里设为1
          this.$refs.tableWrapperInner.scrollLeft = this.scrollLeft - walk;
        }
      }
    },
    scrollToCurrentDate() {
      const cellWidth = document.querySelector('.date-header').clientWidth;
      const scrollDistance = this.currentDateIndex * cellWidth;
      this.$refs.tableWrapperInner.scrollLeft = scrollDistance;
    }
  }
};
</script>

<style scoped>
/deep/.table-wrapper {
  width: auto;
  overflow: hidden; /* 隐藏外部溢出 */
}

/deep/.table-wrapper-inner {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /*// 将原来的滚动属性隐藏，通过鼠标拖动来控制滚动*/
  margin-left: -15px; /* 可根据滚动条宽度调整这个值，向左偏移隐藏滚动条 */
  padding-left: 15px; /* 添加同等宽度的内边距保持内容显示完整 */
  -webkit-user-select: none; /* 阻止在WebKit内核浏览器中选中内容 */
  -moz-user-select: none; /* 阻止在Firefox浏览器中选中内容 */
  -ms-user-select: none; /* 阻止在IE浏览器中选中内容 */
  user-select: none; /* 通用的阻止选中内容的样式，尽量覆盖更多浏览器 */
}

/deep/.production-schedule-table {
  border-collapse: collapse;
  width: auto;
  table-layout: fixed; /* 固定表格布局，使列宽按照设置的宽度来分配 */
  -webkit-user-select: none; /* 阻止在WebKit内核浏览器中选中表格内容 */
  -moz-user-select: none; /* 阻止在Firefox浏览器中选中表格内容 */
  -ms-user-select: none; /* 阻止在IE浏览器中选中表格内容 */
  user-select: none; /* 通用的阻止选中表格内容的样式，尽量覆盖更多浏览器 */
}

/deep/.production-schedule-table th,
/deep/.production-schedule-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  white-space: nowrap; /* 禁止文本换行，确保日期内容完整显示 */
  -webkit-user-select: none; /* 阻止在WebKit内核浏览器中选中单元格内容 */
  -moz-user-select: none; /* 阻止在Firefox浏览器中选中单元格内容 */
  -ms-user-select: none; /* 阻止在IE浏览器中选中单元格内容 */
  user-select: none; /* 通用的阻止选中单元格内容的样式，尽量覆盖更多浏览器 */
}

/deep/.production-schedule-table th {
  width: 100px; /* 设置表头单元格固定宽度，可根据实际情况调整这个值 */
}

/deep/.main-header {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

/deep/.weekday-header {
  border-bottom: 1px solid #ccc;
}

/deep/.date-header {
  border-bottom: 1px solid #ccc;
}

/deep/.plan-quantity-header {
  border-bottom: 1px solid #ccc;
}

/deep/.work-order-header {
  height: 120px; /* 设置工单号表头单元格高度，可根据实际情况调整 */
  vertical-align: middle; /* 垂直居中 */
  position: sticky; /* 设置为粘性定位 */
  left: 0; /* 定位在最左侧 */
  background-color: white; /* 设置背景色与表格一致，避免滚动时显示异常 */
  z-index: 1; /* 提高层级，确保在滚动时显示在最上层 */
  outline: 1px solid #ccc; /* 使用 outline 来模拟右侧边框 */
}

/deep/.table-cell {
  border-bottom: 1px solid #ccc;
}

/* 隐藏滚动条 */
/deep/.table-wrapper::-webkit-scrollbar {
  display: none;
}

/deep/@supports (-webkit-overflow-scrolling: touch) {
  .table-wrapper-inner {
    -webkit-overflow-scrolling: touch;
  }
}
</style>
<template>
  <div class="table-wrapper">
    <div class="table-wrapper-inner" ref="tableWrapperInner" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{ background: '#f0f9eb', color: '#67c23a' }"
        :cell-style="{ padding: '8px' }"
        :row-class-name="tableRowClassName"
        :header-row-class-name="tableHeaderRowClassName"
      >
        <el-table-column
          prop="workOrder"
          label="工单号"
          width="120"
          fixed
        />
        <el-table-column
          v-for="(weekday, index) in weekdays"
          :key="index"
          :label="weekday"
          :width="120"
        >
          <el-table-column
            :label="dateList[index].date"
            :width="120"
          >
            <el-table-column
              label="计划数量"
              :width="120"
            >
              <template slot-scope="scope">
                {{ scope.row[index] }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      weekdays: [], // 存储日期对应的星期数据
      dateList: [], // 存储从当前日期开始前后各30天内的日期数据
      tableData: [], // 这里可以根据实际业务需求填充具体的数据，示例中暂时为空数组
      currentDate: moment(), // 当前日期
      isDragging: false, // 标记是否正在拖动
      startX: 0, // 记录鼠标按下时的横坐标
      scrollLeft: 0, // 记录滚动容器的初始滚动位置
      currentDateIndex: 0 // 当前日期在dateList中的索引
    };
  },
  mounted() {
    this.initTableHeaders();
    this.$nextTick(() => {
      const el = document.createElement('div');
      if ('webkitOverflowScrolling' in el.style) {
        const tableWrapperInner = document.querySelector('.table-wrapper-inner');
        if (tableWrapperInner) {
          tableWrapperInner.style.webkitOverflowScrolling = 'touch';
        }
      }
      // 滚动到当前日期位置
      this.scrollToCurrentDate();
    });
    // 监听 id 为 app 的元素上的 mouseup 事件
    const appElement = document.getElementById('app');
    appElement.addEventListener('mouseup', this.handleMouseUp);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听，防止内存泄漏
    const appElement = document.getElementById('app');
    appElement.removeEventListener('mouseup', this.handleMouseUp);
  },
  methods: {
    initTableHeaders() {
      const startDate = this.currentDate.clone().subtract(30, 'days');
      for (var i = 0; i < 61; i++) {
        const date = startDate.clone().add(i, 'days');
        const weekday = this.getWeekdayName(date);
        this.weekdays.push(weekday);
        this.dateList.push({
          date: date.format('YYYY-MM-DD')
        });
        if (date.isSame(this.currentDate, 'day')) {
          this.currentDateIndex = i;
        }
      }
    },
    getWeekdayName(date) {
      const weekdayIndex = date.isoWeekday() - 1;
      const chineseWeekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      return chineseWeekdays[weekdayIndex];
    },
    handleMouseDown(event) {
      this.isDragging = true;
      this.startX = event.pageX;
      this.$nextTick(() => {
        this.scrollLeft = this.$refs.tableWrapperInner.scrollLeft;
      });
    },
    handleMouseUp() {
      this.isDragging = false;
    },
    handleMouseMove(event) {
      if (this.isDragging) {
        const tableWrapperInner = this.$refs.tableWrapperInner;
        const rect = tableWrapperInner.getBoundingClientRect();
        const isInside = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
        if (!isInside) {
          this.isDragging = false;
        } else {
          const x = event.pageX;
          const walk = (x - this.startX) * 1; // 可根据实际拖动灵敏度调整系数，这里设为1
          this.$refs.tableWrapperInner.scrollLeft = this.scrollLeft - walk;
        }
      }
    },
    scrollToCurrentDate() {
      const cellWidth = 120; // 每个单元格的宽度
      const scrollDistance = this.currentDateIndex * cellWidth;
      this.$refs.tableWrapperInner.scrollLeft = scrollDistance;
    },
    tableRowClassName({row, rowIndex}) {
      return '';
    },
    tableHeaderRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'main-header';
      } else if (rowIndex === 1) {
        return 'weekday-header';
      } else if (rowIndex === 2) {
        return 'date-header';
      } else if (rowIndex === 3) {
        return 'plan-quantity-header';
      }
      return '';
    }
  }
};
</script>

<style scoped>
.table-wrapper {
  width: auto;
  overflow: hidden; /* 隐藏外部溢出 */
}

.table-wrapper-inner {
  width: 100%;
  height: 100%;
  overflow-x: auto; /* 使用自动滚动 */
  margin-left: -15px; /* 可根据滚动条宽度调整这个值，向左偏移隐藏滚动条 */
  padding-left: 15px; /* 添加同等宽度的内边距保持内容显示完整 */
  -webkit-user-select: none; /* 阻止在WebKit内核浏览器中选中内容 */
  -moz-user-select: none; /* 阻止在Firefox浏览器中选中内容 */
  -ms-user-select: none; /* 阻止在IE浏览器中选中内容 */
  user-select: none; /* 通用的阻止选中内容的样式，尽量覆盖更多浏览器 */
}

.el-table {
  border-collapse: collapse;
  width: auto;
  table-layout: fixed; /* 固定表格布局，使列宽按照设置的宽度来分配 */
  -webkit-user-select: none; /* 阻止在WebKit内核浏览器中选中表格内容 */
  -moz-user-select: none; /* 阻止在Firefox浏览器中选中表格内容 */
  -ms-user-select: none; /* 阻止在IE浏览器中选中表格内容 */
  user-select: none; /* 通用的阻止选中表格内容的样式，尽量覆盖更多浏览器 */
}

.el-table th,
.el-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  white-space: nowrap; /* 禁止文本换行，确保日期内容完整显示 */
  -webkit-user-select: none; /* 阻止在WebKit内核浏览器中选中单元格内容 */
  -moz-user-select: none; /* 阻止在Firefox浏览器中选中单元格内容 */
  -ms-user-select: none; /* 阻止在IE浏览器中选中单元格内容 */
  user-select: none; /* 通用的阻止选中单元格内容的样式，尽量覆盖更多浏览器 */
}

.el-table th {
  width: 120px; /* 设置表头单元格固定宽度，可根据实际情况调整这个值 */
}

.main-header {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.weekday-header {
  border-bottom: 1px solid #ccc;
}

.date-header {
  border-bottom: 1px solid #ccc;
}

.plan-quantity-header {
  border-bottom: 1px solid #ccc;
}

.work-order-header {
  height: 120px; /* 设置工单号表头单元格高度，可根据实际情况调整 */
  vertical-align: middle; /* 垂直居中 */
  position: sticky; /* 设置为粘性定位 */
  left: 0; /* 定位在最左侧 */
  background-color: white; /* 设置背景色与表格一致，避免滚动时显示异常 */
  z-index: 1; /* 提高层级，确保在滚动时显示在最上层 */
  outline: 1px solid #ccc; /* 使用 outline 来模拟右侧边框 */
}

.table-cell {
  border-bottom: 1px solid #ccc;
}

/* 隐藏滚动条 */
.table-wrapper-inner::-webkit-scrollbar {
  display: none;
}

.table-wrapper-inner {
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}
</style>
